<template>
  <div class="login">
    <div class="loginBox" id="login">
      <PublicHead></PublicHead>
      <div class="loginList">
        <div class="content">
        </div>
      </div>
      <div class="shifan">
        <div class="content">
          <div class="shifanBox">
            <div class="box">
              <div class="image">
                <img src="../assets/img/reset/pingtai.e69d4b28.png" alt="">
              </div>
              <div class="text-1">平台/基地申报</div>
              <div class="text-2">PINGTAI/JIDISHENBAO</div>
              <div class="text-3">
                <el-button @click="toSelection(0)">示范平台申报</el-button>
                <el-button @click="toSelection(1)">示范基地申报</el-button>
              </div>
              <!-- <div class="text-4" @click="tocount">年审</div> -->
            </div>
            <div class="box">
              <div class="image">
                <img src="../assets/img/reset/jidi.png" alt="">
              </div>
              <div class="text-1">平台/基地考核</div>
              <div class="text-2">PINGTAI/JIDIKAOHE</div>
              <div class="text-3">
                <el-button @click="toSelection(3)">示范平台考核</el-button>
                <el-button @click="toSelection(4)">示范基地考核</el-button>
              </div>
              <!-- <div class="text-4" @click="tocount">年审</div> -->
            </div>
            <div class="box">
              <div class="image">
                <img src="../assets/img/reset/jigou.13b86ba5.png" alt="">
              </div>
              <div class="text-1">入驻机构</div>
              <div class="text-2">RU ZHU JI GOU</div>
              <div class="text-3">
                <el-button @click="toSelection(2)">入驻机构申报</el-button>
                <el-button @click="toSelection(5)">入驻机构考核</el-button>
              </div>
              <!-- <div class="text-4" @click="tocount">年审</div> -->
            </div>
          </div>

        </div>
      </div>
      <div class="gonggao">
        <div class="content">

          <div class="gonggaoBox" v-show="activeTab == 'list1'">
            <div class="gonggaoTitle">
              <div class="left">
                <p :class="{ active: activeTab === 'list1' }" @click="toGonggao('tab')">公告信息</p>
                <p :class="{ active: activeTab === 'list1' }" @click="toGonggao('tab')">GONGGAOXINXI</p>
              </div>
              <div class="right">
                <p :class="{ active: activeTab === 'list2' }" @click="toGongshi('tab')">公示信息</p>
                <p :class="{ active: activeTab === 'list2' }" @click="toGongshi('tab')">GONGSHIXINXI</p>
              </div>
            </div>
            <div class="item" @click="toDetail(item.id)" v-for="(item, index) in gonggaolist" :key="index">
              <div class="sanjiao"></div>
              <!-- <div>公告信息</div> -->
              <div style="color: #fff;font-weight: 400;" v-if="item.topStatus == '0'">公告信息</div>
              <div style="color: red;font-weight: 400;" v-if="item.topStatus == '1'">
                <div style="text-align: center;color: aliceblue;">置顶</div>
              </div>
              <div>{{ item.title }}</div>
              <!-- <div style="color: red;">hot</div> -->
              <div>{{ item.gmtCreate }}</div>
            </div>

            <div class="listButton" @click="toGonggao('list')">
              点击查看更多
            </div>
            <el-empty v-if="gonggaolist.length < 1" description="暂时还没有公告"></el-empty>
          </div>
          <div class="gonggaoBox" v-show="activeTab == 'list2'">

            <div class="gonggaoTitle">
              <div class="left">
                <p :class="{ active: activeTab === 'list1' }" @click="toGonggao('tab')">公告信息</p>
                <p :class="{ active: activeTab === 'list1' }" @click="toGonggao('tab')">GONGGAOXINXI</p>
              </div>
              <div class="right">
                <p :class="{ active: activeTab === 'list2' }" @click="toGongshi('tab')">公示信息</p>
                <p :class="{ active: activeTab === 'list2' }" @click="toGongshi('tab')">GONGSHIXINXI</p>
              </div>
            </div>

            <div class="item" @click="toDetail(item.id)" v-for="(item, index) in gonggaolist" :key="index">
              <div class="sanjiao"></div>
              <!-- <div >公示信息</div> -->
              <div style="color: #fff;font-weight: 400;" v-if="item.topStatus == '0'">公示信息</div>
              <div style="color: red;font-weight: 400;" v-if="item.topStatus == '1'">
                <div style="text-align: center;color: aliceblue;">置顶</div>
              </div>
              <div>{{ item.title }}</div>
              <div>{{ item.gmtCreate }}</div>
            </div>
            <div class="listButton" @click="toGongshi('list')">
              点击查看更多
            </div>
            <el-empty v-if="gonggaolist.length < 1" description="暂时还没有公示"></el-empty>
          </div>

        </div>
      </div>
      <div class="qiye">
        <div class="content">
          <div class="qiyeBox">
            <div class="qiyeBoxTitle">
              <p>企业留言</p>
              <p>QIYELIUYAN</p>

            </div>
            <div class="item" @click="tozixun(0)">
              <div class="left">
                <img src="../assets/img/zixun.png" alt="">
              </div>
              <div class="right">
                <div>{{ zixunCount }}</div>
                <p style="width: 100%;">困难问题</p>
              </div>
            </div>
            <div class="item" @click="tozixun(3)">
              <div class="left">
                <img src="../assets/img/xuqiu.png" alt="">
              </div>
              <div class="right">
                <div class="xuqiu">RONGZIXUQIU</div>
                <p style="width: 100%;">融资需求</p>
              </div>
            </div>


          </div>
        </div>
      </div>
      <PublicFoot></PublicFoot>
    </div>
  </div>
</template>
  
<script>
import PublicHead from '../components/PublicHead.vue'
import PublicFoot from '../components/PublicFoot.vue'
import { gonggao_list, countStatus, message_tousuCount, message_yijianCount, message_zixunCount, user_tiaozhuan, pingtai_Count, user_renzheng } from '@/api/api';
export default {
  data() {
    return {
      count: {

      },
      activeTab: 'list1',
      loginForm: {
        username: '',
        password: '',
      },
      currentPage: {
        page: '1', size: '7', type: '0'
      },
      gonggaolist: [],
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      },
      tousuCount: '',
      yijianCount: '',
      zixunCount: '',
      //判断是否在未认证和认证中进入地区选择
      isselect: null,
      userisrenzhen: ''
    };
  },
  methods: {
    //登录页提示未登录
    error() {
      this.$el.querySelector('#login').scrollIntoView({
        behavior: "smooth",  // 平滑过渡
        block: "start"  // 上边框与视窗顶部平齐。默认值
      });
    },
    submitForm() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          // // 提交登录表单

        } else {
          console.log('登录表单验证失败');
          return false;
        }
      });
    },
    //跳转到详情页
    toDetail(detailId) {
      this.$store.commit('setDetailid', detailId)
      this.$router.push('/detail');
    },
    //跳转到地区选择公告
    toSelection(num) {
      if (num == '0') {
        if (this.isselect == 1 || this.isselect == 2) {

          this.$router.push('/selection');
          localStorage.setItem('type', num)
        } else {
          if (this.isselect == 3) {
            this.$message.error('请等待企业认证通过后再申报!');
            setTimeout(() => {
              this.$router.push('/gerenCenter/qydetail')
            }, 1000);
          } else {
            this.$message.error('请先进行认证或等待认证成功后，再进行申报！');
            this.$router.push('/qiyerenzhen')
          }

        }
      } else if (num == '1') {
        if (this.isselect == 1 || this.isselect == 2) {
          this.$router.push('/selection');
          localStorage.setItem('type', num)
        } else {
          if (this.isselect == 3) {
            this.$message.error('请等待企业认证通过后再申报!');
            setTimeout(() => {
              this.$router.push('/gerenCenter/qydetail')
            }, 1000);
          } else {
            this.$message.error('请先进行认证或等待认证成功后，再进行申报！');
            this.$router.push('/qiyerenzhen')
          }
        }
      } else if (num == '2') {
        if (this.isselect == 1 || this.isselect == 2) {
          user_tiaozhuan({ userId: this.$store.state.userId, type: 2, level: 3 }).then((res) => {
            if (res.data.data == '1') {
              this.$message.error('您已提交相同级别的申报,为您跳转个人中心查看!');
              setTimeout(() => {
                this.$router.push('/gerenCenter/ptlist')
              }, 1000);
            } else {
              this.$router.push('/ruzhujg')
            }
          })
          localStorage.setItem('type', num)
        } else {
          if (this.isselect == 3) {
            this.$message.error('请等待企业认证通过后再申报!');
            setTimeout(() => {
              this.$router.push('/gerenCenter/qydetail')
            }, 1000);
          } else {
            this.$message.error('请先进行认证或等待认证成功后，再进行申报！');
            this.$router.push('/qiyerenzhen')
          }
        }
      } else if (num == '3' || num == '4' || num == '5') {

        if (this.isselect == 1 || this.isselect == 2) {
          this.$router.push('/nianshen');
        } else {
          if (this.isselect == 3) {
            this.$message.error('请等待企业认证通过后再申报!');
            setTimeout(() => {
              this.$router.push('/gerenCenter/qydetail')
            }, 1000);
          } else {
            this.$message.error('请先进行认证或等待认证成功后，再进行考核！');
            this.$router.push('/qiyerenzhen')
          }

        }
      }




    },
    //跳转到信息公告
    toGonggao(where) {
      if (where == 'tab') {
        this.activeTab = 'list1'
        this.currentPage.type = '0'
        this.getlist()
      } else if (where == 'list') {
        this.$router.push('/gonggao');
      }
    },
    //跳转到信息公示
    toGongshi(where) {
      if (where == 'tab') {
        this.activeTab = 'list2'
        this.currentPage.type = '1'
        this.getlist()
      } else if (where == 'list') {
        this.$router.push('/gongshi');
      }
    },
    tocount() {
      this.$router.push('/countnum');
    },
    tozixun(where) {
      if (where == '0') {
        if (this.userisrenzhen == '1') {
          this.$router.push('/zixun')
        } else if(this.userisrenzhen == '2'){
          this.$message.error('请先通过企业认证后再发表留言')
          setTimeout(()=> {
            this.$router.push('/gerenCenter/qydetail')
          }, 1000)
      }else if(this.userisrenzhen == '3'){
        this.$message.error('请等待企业认证通过后再发表留言')
      }else if(this.userisrenzhen == '0'){
        this.$message.error('请进行企业认证后再发表留言')
        setTimeout(()=> {
            this.$router.push('qiyerenzhen')
          }, 1000)
      }

    } else if(where == '1') {
  this.$router.push('/jianyi');
} else if (where == '2') {
  this.$router.push('/tousu');
} else if (where == '3') {
  this.$router.push('/rongzi');
}
    },
toRongzi() {
  this.$router.push('/rongzi');
},
redirectToAdmin() {
  // 跳转到后台管理页面
},
goToRegister() {
  // 跳转到注册账号页面
  this.$router.push('/register');
},
goToForgetPassword() {
  // 跳转到忘记密码页面
},
tiaozhuan() {

},
getlist() {
  gonggao_list({ page: this.currentPage.page, size: this.currentPage.size, type: this.currentPage.type }).then((res) => {
    this.gonggaolist = res.data.data.records
    console.log(this.gonggaolist);
    this.gonggaolist = res.data.data.records.map(item => ({
      ...item,
      gmtCreate: new Date(item.gmtCreate).toISOString().slice(0, 10)
    }));
  })
},
gotorenzheng(){
  user_renzheng({ id: this.$store.state.userId }).then(res => {
    // console.log(res);
    this.userisrenzhen = res.data.data.authentication_state
  })
}
    
  },
mounted() {
  this.gotorenzheng()
  if (!localStorage.getItem('token'))
    this.$router.push('/login');
  localStorage.removeItem('type');
  localStorage.removeItem('area');
  console.log(this.$store.state.userId);
  this.getlist()
  countStatus().then((res) => {
    this.count = res.data.data
    console.log(this.count);
  })
  message_tousuCount().then((res) => {
    this.tousuCount = res.data.data
  })
  message_yijianCount().then((res) => {
    this.yijianCount = res.data.data
  })
  message_zixunCount().then((res) => {
    this.zixunCount = res.data.data
  })
  user_renzheng({ id: this.$store.state.userId }).then((res) => {
    this.isselect = res.data.data.authentication_state
  })
},
components: {
  PublicHead,
    PublicFoot
}
}
</script>
  
<style scoped lang="scss" >
.active {
  color: white !important;
}

.content {
  width: 1220px;
  height: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.loginList {
  width: 100%;
  height: 533px;
  background: url('../assets/img/reset/banner1.png')no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  box-sizing: border-box;

  .loginBox {
    position: absolute;
    right: 14%;
    width: 362px;
    height: 458px;
    top: 4.5%;
    background: #FFFFFF;
    border-radius: 10px 10px 10px 10px;
    box-sizing: border-box;
  }
}

.shifan {
  overflow: hidden;
  width: 100%;
  height: 530px;
  background: url('../assets/img/shifan.png');
  background-size: 100% 100%;
  transform: scale(1.1);
  box-sizing: border-box;

  .shifanBox {
    width: 91%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .box {
      width: 370px;
      height: 356px;
      background: #FFFFFF;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;

      .image {
        width: 99px;
        height: 99px;
        margin-top: 3rem;

        img {
          width: 100%;
          height: 100%;

        }
      }

      .text-1 {
        color: #3C4D7D;
        height: 35px;
        margin-top: 10px;
        text-align: center;
        line-height: 35px;
        cursor: pointer;
        font-size: 27px;
      }

      .text-2 {
        width: 100%;
        height: 11px;
        font-size: 12px;
        margin-top: 5px;
        color: #3C4D7D;
        text-align: center;
        letter-spacing: 2px;
        font-family: "Microsoft YaHei", sans-serif;
        cursor: pointer;
      }

      .text-3 {
        width: 180px;
        height: 20px;
        margin-top: 20px;
        color: #3C4D7D;
        text-align: center;
        cursor: pointer;

        .el-button {
          width: 100%;
          background-color: #F1F9FF;
          color: #0066FF;
          margin-bottom: 10px;
          margin: 5px 0px;

          &:hover {
            background-color: #0066FF;
            color: white;
          }
        }

      }

      .text-4 {
        color: #3C4D7D;
      }
    }

    .box:nth-of-type(2) {
      margin: 0px 55px;
    }
  }
}

.gonggao {
  width: 100%;
  height: 776px;
  background: url('../assets/img/gonggao.png');
  background-size: 102% 100%;
  padding-top: 80px;
  box-sizing: border-box;

  .gonggaoBox {
    width: 1220px;
    height: 520px;
    background: #DDEAFE;
    box-sizing: border-box;
    padding: 30px;
    position: relative;

    .listButton {
      position: absolute;
      bottom: 4%;
      left: 50%;
      transform: translateX(-50%);
      margin: 0 auto;
      background-color: #006EFF;
      width: 200px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: white;
      border-radius: 20px;
      cursor: pointer;
    }

    .gonggaoTitle {
      display: flex;
      position: absolute;
      top: -17%;
      left: 33%;

      .left {
        margin-right: 50px;
        text-align: center;
        cursor: pointer;

        p:nth-of-type(1) {
          margin: 0;
          width: 100%;
          height: 44px;
          font-size: 45px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #62D1FF;
          line-height: 36px;
        }

        p:nth-of-type(2) {
          color: #62D1FF;
          margin: 0;
          font-family: Arial, Helvetica, sans-serif;
        }
      }

      .right {
        cursor: pointer;
        text-align: center;

        p:nth-of-type(1) {
          color: #62D1FF;
          margin: 0;
          width: 100%;
          height: 44px;
          font-size: 45px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 36px;
        }

        p:nth-of-type(2) {
          margin: 0;
          color: #62D1FF;
          font-family: Arial, Helvetica, sans-serif;
        }
      }
    }

    .item {
      height: 60px;
      display: flex;
      align-items: center;
      cursor: pointer;
      justify-content: space-around;
      padding: 0px 10px;

      &:hover {
        background-color: white;
        border-left: #1CA9FF 5px solid;
      }

      .sanjiao {
        position: relative;
        /* 相对定位，用于定位伪元素 */
        width: 0;
        height: 0;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 5px solid #F56505;

        margin-right: 15px;
      }

      div:nth-of-type(2) {
        width: 100px;
        height: 27px;
        background: #FBF4F4;
        border: 1px solid transparent;
        background-color: #006EFF;
        border-radius: 5px 5px 5px 5px;
        color: #D82E00;
        text-align: center;
        line-height: 27px;
        margin-right: 20px;

        img {
          width: 20px;
          height: 20px;
        }
      }

      div:nth-of-type(3) {
        width: 935px;
        height: 18px;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #202D40;
        line-height: 20px;
      }

      div:nth-of-type(4) {
        width: 100px;
      }
    }

  }
}

.qiye {
  width: 100%;
  height: 515px;
  background: url('../assets/img/qiye.png');
  background-size: 102% 100%;

  .qiyeBox {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    position: relative;

    .qiyeBoxTitle {
      position: absolute;
      top: -60%;
      left: 43%;
      text-align: center;

      .zuo {
        position: relative;

        img {
          position: absolute;
          width: 280px;
          height: 5px;
          background-color: #ccc;
          left: 10%;
          bottom: 1%;
        }
      }

      p:nth-of-type(1) {
        margin: 0;
        width: 100%;
        height: 44px;
        font-size: 45px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
      }

      p:nth-of-type(2) {
        margin: 0;
        width: 169px;
        height: 10px;
        font-size: 12px;
        font-family: Arial;
        font-weight: 400;
        color: #7E7E7E;
        line-height: 36px;
        letter-spacing: 4px;
    margin-top: 5px;
      }
    }

    .item {
      width: 300px;
      height: 165px;
      background: #FFFFFF;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.6s;

      &:hover {
        transform: scale(1.1);
      }

      cursor: pointer;

      .left {
        img {
          width: 73px;
          height: 64px;
          margin-right: 20px;

        }
      }

      .right {
        .xuqiu {
          width: 111px;
          height: 14px;
          font-size: 18px;
          font-family: Arial;
          font-weight: 400;
          color: #073958;
          line-height: 1px;
        }

        div {
          margin-bottom: 10px;
          width: 42px;
          height: 29px;
          font-size: 40px;
          font-family: Arial;
          font-weight: bold;
          color: #EB7400;
          line-height: 10px;
        }

        p {
          margin: 0;
          width: 100px;
          height: 25px;
          font-size: 25px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #073958;
          line-height: 3px;
        }
      }
    }
  }
}

.form-title {
  text-align: center;
}

.el-form-item {
  text-align: center;

}

.el-form {
  padding: 20px;
}

.form-title {
  margin-top: 50px;
}
</style>